
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Using the ConsoleFilters plugin</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
#yconsole {
    margin: 0 auto 1em;
}

#demo .yui3-console .yui3-console-title {
    border: 0 none;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    text-transform: none;
}
#demo .yui3-console .yui3-console-entry-meta {
    margin: 0;
}
</style>

<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Using the ConsoleFilters plugin</h1>

<div class="exampleIntro">
	<p>This example illustrates how to use and configure the ConsoleFilters plugin for Console.  The debug versions of YUI module files are used, so standard YUI debugging messages are broadcast to the Console.</p>

<p>Use the checkboxes in the Console footer to control which messages are displayed or hidden.  Click the &quot;Log a message&quot; button to call <code>Y.log</code> using a custom category and source.</p>

<p>Note how new filter checkboxes are added when a new category or source are received by the Console, for example when clicking on the &quot;Log a message&quot; button.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="demo">
    <div id="yconsole"></div>
    <button id="log" type="button">Log a message</button>
    <button id="toggle_info" type="button">Hide info messages</button>
</div>
<script type="text/javascript">
// Create a YUI instance and request the console module and its dependencies
YUI({filter:"debug", logInclude: {event:true, attribute:true, node:true, base:true, widget:true, MyApp:true}}).use("console", "console-filters", function (Y) {

// create the console instance
var yconsole = new Y.Console({
    boundingBox: '#yconsole',
    height: '400px',
    width: '450px',
    newestOnTop: false,
    style: 'block',
    plugins: [ Y.Plugin.ConsoleFilters ]
}).render();

// unknown categories and sources are allowed.
yconsole.filter.hideCategory('error');

// hide and show methods support N arguments.
yconsole.filter.hideSource('attribute','widget');

/* Alternately
var yconsole = new Y.Console({
    boundingBox: '#console',
    height: '400px',
    width: '450px',
    style: 'block',
    newestOnTop: false
}).plug(Y.Plugin.ConsoleFilters, {
    category: {
        error: false
    },
    source: {
        attribute: false,
        widget: false
    }
}).render();
*/

// Broadcast a log message from a button that uses a custom category and source
Y.on('click', function () {
    Y.log('Logging a message to the Console','my_stuff','MyApp');
},'#log');

// It is also possible to set the filter's subattributes directly
Y.on('click', function () {
    var current = yconsole.filter.get('category.info');

    yconsole.filter.set('category.info', !current);

    this.set('text', (current ? 'Show' : 'Hide') + ' info messages');
},'#toggle_info');

});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
